<template>
	<view style="padding-bottom: 120rpx;">
		<u-navbar :border-bottom='false' back-icon-size='48' title="确认订单"></u-navbar>
		<view class="address">
			<view class="addressBox" v-if="!defAddress">
				<image src="../../../../static/imgs/map.png" mode=""></image>
				<view class="text">
					添加收货地址
				</view>
				<view class="right" @click="navTo('../address/address')">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="addressBox" v-else>
				<image src="../../../../static/imgs/map.png" mode=""></image>
				<view class="text">
					<view class="info">
						<text class="name">{{defAddress.consignee}}</text>
						<text class="num">{{defAddress.link}}</text>
					</view>
					<view class="add">
						{{defAddress.province+defAddress.city+defAddress.district+defAddress.address}}
					</view>
				</view>
				<view class="right" @click="navTo('../address/address')">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
		</view>
		<view class="goodsBox">
			<view class="goods-li" v-for="(item,index) in goodsArr" :key='index'>
				<view class="shopName" v-if="item.goods_source == 0">
					爱世界超值商城
				</view>
				<view class="shopName" v-if="item.goods_source == 1">
					京东
				</view>
				<view class="goodsInfo">
					<image :src="item.cover" mode=""></image>
					<view class="title">
						<text>{{item.goods_name}}</text>
					</view>
				</view>
				<view class="num">
					<text class="numtext">购买数量</text>
					<u-number-box disabled v-model="item.goods_num"></u-number-box>
				</view>
				<view class="freight">
					运费<text class="freight-num">¥ {{freight?freight:'0'}}</text>
				</view>
				<view class="total">
					共{{item.goods_num}}件 合计：<text class="price">¥ {{Number(item.goods_num)*Number(item.price)}}</text>
				</view>
			</view>
		</view>

		<view class="invoice">
			<view class="invoice-li">
				<view class="left">
					<image src="../../../../static/imgs/xuyaofp.png" mode=""></image>
					<text>需要发票</text>
				</view>
				<view class="right" @click="navTo('../invoice/invoice')">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="invoice-li">
				<view class="left">
					<image src="../../../../static/imgs/fulijindk.png" mode=""></image>
					<text>福利金抵用（可用{{ info.welfare_fund }}）</text>
				</view>
				<view class="right">
					<u-switch v-model="isCheck" @change="changeFn" size='28'></u-switch>
				</view>
			</view>
		</view>
		<view class="settlePay">
			<view class="text">
				合计：
			</view>
			<view class="price">
				<text style="font-size: 24rpx;">¥</text>{{total.toFixed(2)}}
			</view>
			<view class="btn" @click="openPay">
				去结算
			</view>
		</view>
		<u-popup v-model="showPayway" mode="bottom" closeable>
			<view class="payway">
				<view class="title">
					选择支付方式
				</view>
				<view class="payway-li" @click="choosePay(1)">
					<image src="../../../../static/imgs/weixinzf.png" mode=""></image>
					<text>微信支付</text>
					<view class="left" v-if="payCur == 1">
						<u-icon name="checkbox-mark" color="#2979ff" size="32"></u-icon>
					</view>
				</view>
				<view class="payway-li" @click="choosePay(2)">
					<image src="../../../../static/imgs/zhifubaozf.png" mode=""></image>
					<text>支付宝</text>
					<view class="left" v-if="payCur == 2">
						<u-icon name="checkbox-mark" color="#2979ff" size="32"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showPayway: false,
				defAddress: '', //默认地址
				addressId: '',
				isCheck: false,
				cartId: '',
				goodsArr: [], // 结算商品
				welfare: 0, //可用福利金
				freight: 0, //运费
				totalPrice: 0, // 总价
				invoiceId: '', // 发票id
				payCur: 0,
				payId: '',
				//welfarePrice: 0, //抵扣福利金
				disWelfare: 0,
				info: '',
        //user:{}
			}
		},
		onLoad(option) {
			this.cartId = this.$store.state.cartId
      //console.log(this.cartId)
      //this.cartId = option.cart_id
      //console.log(this.cartId)
			//this.welfarePrice = option.welfareFund
			//this.getWelfareFound()
			this.getInfo()
		},
		onShow() {
			if (this.$store.state.addressId) {
				this.addressId = this.$store.state.addressId
			}
			if (this.$store.state.invoiceId) {
				this.invoiceId = this.$store.state.invoiceId
			}
			this.totalPrice = 0
			this.getDefAddress()
			this.getGoodsArr()
		},
		methods: {
			// 获取用户等级
			async getInfo() {
				let res = await myRequest.getUserInfo()
				if (res.status) {
					this.info = res.data
					this.$store.commit('changeInfo', res.data) // 保存用户信息
				}
			},
			// 结算
			async openPay() {
				if (!this.info.province) {
					uni.showModal({
						content: '暂未设置归属地,是否前往设置?',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../../../mine/editInfo/editInfo'
								})
							}
						}
					})
					return
				}
				let {
					cartId,
					addressId,
					invoiceId,
					disWelfare,
				} = this
				if (!addressId) {
					uni.showToast({
						title: '你还没填写收货地址',
						icon: 'none'
					})
					return
				}
				let res = await myRequest.addGoodsorder({
					cart_id: cartId.toString(),
					address_id: addressId,
					invoice_id: invoiceId ? invoiceId : '',
					welfare_fund: disWelfare
				})
				if (res.status) {
					this.payId = res.pay_id
					this.showPayway = true
				}
			},
			changeFn(e) {
				if (e) {
					if (Number(this.info.welfare_fund) <= 0) {
						uni.showToast({
							title: '暂无福利金可抵用',
							icon: 'none'
						})
						this.isCheck = false
						return
					} else {
					  this.welfare = Number(this.info.welfare_fund) > this.disWelfare ? this.disWelfare : this.disWelfare - Number(this.info.welfare_fund)
					}
				} else {
					if (Number(this.info.welfare_fund) <= 0) {
						uni.showToast({
							title: '暂无福利金可抵用',
							icon: 'none'
						})
						this.isCheck = false
						return
					} else {
						this.welfare = 0
					}
				}
			},
			choosePay(index) {
				this.payCur = index
				let payCode = ''
				if (index == 1) {
					// 微信支付
					payCode = '6004'
				}
				if (index == 2) {
					//支付宝支付
					payCode = '6005'
				}
				this.showPayway = false
				uni.navigateTo({
					url: '../../pay/pay?payCode=' + payCode + '&payId=' + this.payId
				})
			},
			// 获取订单商品
			async getGoodsArr() {
				let {
					cartId,
					welfarePrice
				} = this
				let res = await myRequest.getMycart({
					cart_id: cartId.toString()
				})
				if (res.status) {
					// 计算总价
          let totalWelfare = 0
					res.data.forEach(k => {
						let price = Number(k.price)
						let num = Number(k.goods_num)
            totalWelfare += Number(k.use_welfare_fund) * num
						let total = price * num
						this.totalPrice += total
            k.goods_num = Number(k.goods_num)
					})

          this.disWelfare = totalWelfare
          //console.log(this.disWelfare)
					this.goodsArr = res.data
				}
			},
			// 确认订单参数接口
			async orderCon(cart_id, address_id) {
				let res = await myRequest.orderconfirm({
					cart_id: cart_id,
					address_id: address_id
				})
				if (res.status) {
					this.freight = res.data.freight.freight
					this.totalPrice = this.totalPrice + Number(this.freight)
					res.data.skuNums.forEach(item => {
						this.goodsArr.forEach(m => {
							if (m.goods_name == item.name) {
								m.stockStateDesc = item.stockStateDesc // 有货无货
							}
						})
					})
				}
			},
			// 获取地址
			async getDefAddress() {
				let {
					addressId
				} = this
				let res = await myRequest.getMyaddress()
				if (res.status) {
					if (!addressId) {
						// 未选择地址
						res.data.forEach(item => {
							if (item.is_default == 1) {
								this.defAddress = item
							}
						})
						this.orderCon(this.cartId, this.defAddress.address_id)
					} else {
						// 选择其他地址
						res.data.forEach(item => {
							if (item.address_id == addressId) {
								this.defAddress = item
							}
						})
						this.orderCon(this.cartId, this.defAddress.address_id)
					}
					this.addressId = this.defAddress.address_id
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
    computed:{
		  total(){
        return this.totalPrice + this.freight - this.welfare
      }
    }
	}
</script>

<style lang="scss" scoped>
	.address {
		width: 710rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding: 0 20rpx;
		display: flex;
		align-items: center;

		.addressBox {
			width: 100%;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				width: 85%;
				margin-left: 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

				.info {
					.name {
						font-size: 36rpx;
						font-family: PingFangSC-Regular;
						color: #120404;
					}

					.num {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Light;
						color: #666666;
					}
				}

				.add {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.right {
				margin-left: auto;
			}
		}
	}

	.goodsBox {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 20rpx;
		margin: 20rpx auto;

		.goods-li {
			width: 100%;
			height: auto;
			border-bottom: 2rpx solid #F2F2F7;

			&:last-child {
				border-bottom: none
			}

			.shopName {
				width: 100%;
				height: 88rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				line-height: 88rpx;
			}

			.goodsInfo {
				display: flex;

				image {
					width: 160rpx;
					height: 160rpx;
				}

				.title {
					width: 80%;
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					flex-direction: column;

					.tip {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.num {
				width: 70%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 30%;

				.numtext {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}
			}

			.freight {
				width: 70%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 30%;

				.freight-num {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					margin-left: 160rpx;
				}
			}

			.total {
				width: 70%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #666666;
				margin-left: 30%;

				.price {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #F16026;
				}
			}
		}
	}

	.invoice {
		width: 710rpx;
		height: 176rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 20rpx;

		.invoice-li {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F7;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}
			}
		}
	}

	.settlePay {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 28rpx;

		.text {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333
		}

		.price {
			font-size: 36rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #F16026;
			margin-right: 40rpx;
		}

		.btn {
			width: 176rpx;
			height: 72rpx;
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			border-radius: 12rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF
		}
	}

	.payway {
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.payway-li {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 56rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				margin-left: 16rpx;
				font-size: 32rpx;
				font-family: Alibaba Sans;
				font-weight: 400;
				color: #333333;
			}

			.left {
				margin-left: auto;
			}
		}
	}

	/deep/ .u-checkbox__label {
		margin-left: 0rpx;
		margin-right: 0rpx;
	}
</style>
